<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>云端花屋</title>
    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/css/bootstrap/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/sort.js"></script>
    <script src="${pageContext.request.contextPath}/js/holder.js"></script>

    <script>

    </script>
    <style type="text/css">
        .button {
            clear: both;
            margin: 10px auto;
            text-align: center;
            font-size: 20px;
            padding: 10px 0;
            line-height: 25px;
            color: #666;
            border-top: #ddd 1px solid;
        }

        .button a {
            margin: 0 7px;
            color: #666;
        }

        .button a:hover {
            color: #000;
            text-decoration: none;
        }

        .data-card {
            width: 100%;
            height: 100%;
            padding: 10px;
            margin-top: 10px;
            border-radius: 16px;
            box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        }

        .data-card-img {
            width: 180px;
            height: 200px;
            border-radius: 16px;
        }

        .data-card-img:hover {
            border-radius: 16px;
        }

        .data-card-img-box :hover {
            transition: transform .8s cubic-bezier(0.23, 1, 0.32, 1), box-shadow .8s cubic-bezier(0.23, 1, 0.32, 1);
            transform: scale(1.05);
            z-index: 2;
            border-radius: 16px;
        }

        .data-card-text {
            width: 100%;
            display: flex;
            padding-top: 8px;
            align-items: center;
            flex-direction: row;
            justify-content: space-around;
        }

        .data-card-text a:hover{
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id="main" class="container">

    <div id="header">
        <%@ include file="header.jsp" %>
    </div>
    <div class="content">

        <%--        <c:if test="${!empty goodsList}">--%>
        <c:forEach items="${activityList}" var="activities">

            <c:if test="${activities.activityid != 1}">

                <div class="module" style="background: whitesmoke ;padding-bottom: 8px;border-radius: 10px">
                    <div class="hd">
                        <div style="margin-left: 32px;height: 48px;line-height: 48px;font-size: 24px; font-weight: bold" >${activities.activityname}</div>
                    </div>
                    <c:forEach items="${goodsList}" var="goods">
                        <div class="bd">
                            <div class="data" >
                                <ul >
                                    <c:forEach items="${goods}" var="good">
                                        <c:if test="${good.activityid == activities.activityid}" var="condition">
                                            <li class="data-item">

                                                <div class="data-card">


                                                    <div class="data-card-img-box">
                                                        <a href="${pageContext.request.contextPath}/detail?goodsid=${good.goodsid}">
                                                            <img src="${pageContext.request.contextPath}/pictures/${good.imagePaths[0].path}"
                                                                 alt="" class="data-card-img"/>
                                                        </a>
                                                    </div>


                                                    <div class="data-card-text">

                                                        <div style="display: inline-block;font-size: 20px;color: #c0c0c0">

                                                            <a style="color: #3c3c3c"
                                                               href="${pageContext.request.contextPath}/detail?goodsid=${good.goodsid}">${good.goodsname}</a>
                                                        </div>
                                                        <div class="data-card-text-price"
                                                             style="display: inline-block;font-size:16px ;color: red">
                                                            <b>￥${good.price}</b>
                                                        </div>

                                                    </div>

                                                    <div>
                                                        <c:if test="${good.fav}">
                                                            <button
                                                                    class="like-button glyphicon glyphicon-heart btn btn-default"
                                                                    data-id="${good.goodsid}"
                                                                    style="display: none;"></button>
                                                        </c:if>
                                                        <c:if test="${!good.fav}">
                                                            <button
                                                                    class="like-button glyphicon glyphicon-heart-empty btn btn-default"

                                                                    data-id="${good.goodsid}"
                                                                    style="display: none; border-radius: 10px"></button>
                                                        </c:if>
                                                    </div>
                                                </div>
                                            </li>

                                        </c:if>
                                    </c:forEach>

                                </ul>
                                <div class="clear-float" style="clear: both;"></div>
                            </div>
                        </div>
                    </c:forEach>
                </div>
            </c:if>
        </c:forEach>

    </div>
</div>
</body>
</html>